<template>
	<view>
		<u-navbar height="50" back-icon-color="#000" :background="background" title="支付" title-color="#000"
			title-size="36">
		</u-navbar>
		<!-- <view class="payTimeView">
			<view class="payTimeTitle">支付剩余时间</view>
			<u-count-down :show-hours="false" :timestamp="timestamp" font-size="40" separator-size="40"
				separator-color="#F6632D" color="#F6632D">
			</u-count-down>
		</view> -->
		<view class="payTimeView2" style="margin-top: 30rpx;">
			<view class="payPrice">￥{{totalPrice}}</view>
			<view class="orderNumView">
				<text class="orderNum">订单号：{{orderNo}}</text>
			</view>
		</view>
		<view class="payItemView">
			<view class="payTypeTitme">请选择支付方式</view>
			<view class="payTypeItem" @click="onSelected(0)">
				<u-icon name="/static/icon/weixin.png" size="50"></u-icon>
				<view class="payTypeTitle">微信</view>
				<u-icon name="/static/icon/selected.png" size="40" v-if="current == 0"></u-icon>
				<u-icon name="/static/icon/unselected2.png" size="40" v-else></u-icon>
			</view>

<!-- 			<view class="payTypeItem" @click="onSelected(1)">
				<u-icon name="/static/alipay.png" size="50"></u-icon>
				<view class="payTypeTitle">支付宝</view>
				<u-icon name="/static/selected.png" size="40" v-if="current == 1"></u-icon>
				<u-icon name="/static/unselected2.png" size="40" v-else></u-icon>
			</view> -->

			<!-- 			<view class="payTypeItem" @click="onSelected(2)"><! #ifdef APP-PLUS 
				<u-icon name="/static/balance.png" size="50"></u-icon><! #endif 
				<view class="payTypeTitle">余额支付({{balance}})</view>
				<u-icon name="/static/selected.png" size="40" v-if="current == 3"></u-icon>
				<u-icon name="/static/unselected2.png" size="40" v-else></u-icon>
			</view> -->
		</view>
		<view class="relaseView" @click="onOrderPayment()">立即支付</view>
	</view>
</template>

<script>
	import {
		getWechatPay
	} from '../../api/index.js'
	import {
		toast
	} from '../../utils/common.js';
	export default {
		data() {
			return {
				timestamp: 1800,
				background: {
					backgroundColor: '#fff'
				},
				current: 0,
				items: [{
					value: '微信',
					image: '/static/weixin.png',
					name: '微信支付',
				}, {
					value: '支付宝',
					image: '/static/alipay.png',
					name: '支付宝支付',
				}, {
					value: '余额',
					image: '/static/balance.png',
					name: '余额支付',
				}],
				orderNo: '',
				totalPrice: '0.00',
				balance: ''
			}
		},
		onLoad(res) {
			this.orderNo = res.order_no;
			this.totalPrice = res.money;
			// this.onUserInfo();
		},
		methods: {
			onUserInfo() {
				let self = this
				// self.$user.userInfo({}, true).then(res => {
				// 	self.balance = res.data.balance;
				// });
			},
			onSelected(index) {
				this.current = index;
			},
			onOrderPayment() {
				let self = this;
				getWechatPay({
					order_no: this.orderNo
				}).then(res => {
					// self.onPayment("wxpay", res.data);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.pay_params.timeStamp,
						nonceStr: res.data.pay_params.nonceStr,
						package: res.data.pay_params.package,
						signType: res.data.pay_params.signType,
						paySign: res.data.pay_params.paySign,
						success: function(res) {
							// success && success(res.data);
							toast('支付成功');
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/order/order'
								})
							}, 500);
						},
						fail: function(err) {
							console.log(err);
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
							// fail && fail(err.data);
						},
						complete(ress) {
							// complete && complete(ress.data);
						}
					});
				})
				
			},
			miniPayment() {
				let self = this;
				self.$user.orderMiniPayment({
					order_no: this.orderNo
				}, true).then(res => {
					self.onPayment("wxpay", res.data);
				});
			},
			onPayment(provider, orderInfo) {
				let self = this;

				// self.$utils.pay(provider, orderInfo, (revert) => {
				// 	self.$utils.tips('支付成功');
				// 	setTimeout(function() {
				// 		uni.navigateBack({
				// 			delta: 1
				// 		});
				// 	}, 500);
				// }, (error) => {}, (res) => {});
			},
		}
	}
</script>

<style>
	.payTimeView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	
	.payTimeView2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}
	
	.payTimeTitle {
		font-size: 26rpx;
		font-weight: 400;
		color: #F6632D;
		margin-bottom: 20rpx;
	}
	
	.payTime {
		font-size: 36rpx;
		font-weight: 400;
		color: #F6632D;
		margin-top: 20rpx;
	}
	
	.payPrice {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.orderNumView {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}
	
	.orderNum {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	
	.orderNext {
		width: 14rpx;
		height: 26rpx;
		margin-left: 30rpx;
	}
	
	.payItemView {
		background: #FFFFFF;
		border-radius: 20Rpx 20Rpx 0px 0px;
		margin-top: 30rpx;
	}
	
	.payTypeTitme {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		border-bottom: 1px solid #DDDDDD70;
	}
	
	.payTypeItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #DDDDDD70;
	}
	
	.payTypeTitle {
		flex: 1;
		margin-left: 30rpx;
	}
	
	.relaseView {
		height: 80rpx;
		background: #F6632D;
		border-radius: 6rpx;
		margin: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	

	page {
		background: #f5f5f5;
	}
</style>